<!--月度公司层面会议统计分析-->
<template>
    <Layout class="menu-left">
      <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                <FormItem label="企业名称：" prop="order">
                    <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                  :currentOrgId="dataToQuery.companyId"
                                  :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                </FormItem>
                </Col>
               <!-- <Col span="8">
                <FormItem label='年度：' prop='year'>
                    <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                </FormItem>
                </Col>-->
                <Col span="8">
                    <FormItem label="月份：" prop="month" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthStart" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthFrom = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthEnd && date.valueOf() > dataToQuery.monthEnd;}}"></DatePicker> -
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthEnd" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthTo = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthStart && date.valueOf() < dataToQuery.monthStart;}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                <Button @click="reset" class="ivu-btn-reset">重置</Button>
                <Button type="primary" class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                <FormItem label="企业名称：" prop="belongOrgId">
                    <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                  :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label='年度：' prop='year'>
                    <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="项目名称：" prop="projectName" >
                    <Input v-model='dataToQuery.projectName' class="query-form-el"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                </Col>
            </Row>
        </Form>


      <Card :dis-hover="true">
        <div id="companyEcharts" ></div>
      </Card>

        <Table ref='table' :height='this.Common.tableHeightNum' no-data-text="没有查询到相关数据!"  :loading='pageStatus.loading'
               :row-class-name="(row,index)=>(index===0)?'table-summary-row':''"
               border :columns="columns1"  :data="dataTable" >
        </Table>





       <!-- <Row style="margin-right:10px;">
            <Col span="24" >
            <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>-->
    </Layout>
</template>
<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import * as echarts from 'echarts';
    export default {
        name: "investmentStatistics",
        components:{
            cascaderDom
        },
        data() {
            return{
                ...this.createCommonDataField(),
                columns1: [
					{ title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
					        if(params.row.companyName === '汇总') return h('span', "汇总");
					        return h('span', (params.index) + (this.pagedata.currentPage - 1) * this.pagedata.pageSize);
					}},
					{ key:'companyName',title: '单位名称', fixed: 'left', align: 'center', minWidth: 240 ,render: (h, params) => {
					        if(params.row.companyName === '汇总') return h('span', "");
					        return h('span', params.row.companyName);
					}},
                    { key:'jobType1Num',title: '正式工',  align: 'center', minWidth: 80 },
                    { key:'jobType2Num',title: '合同工',  align: 'center', minWidth: 80 },
                    { key:'jobType3Num',title: '劳务工',  align: 'center', minWidth: 80 },
                    { key:'injuryDegree1Num',title: '轻伤',  align: 'center', minWidth: 80 },
                    { key:'injuryDegree2Num',title: '重伤',  align: 'center', minWidth: 80 },
                    { key:'injuryDegree3Num',title: '死亡',  align: 'center', minWidth: 80 },
                    { key:'furloughNum',title: '歇工总天数',  align: 'center', minWidth: 120 },
                    { key:'total',title: '合计',  align: 'center',fixed: 'right', minWidth:100 },
                ],
                tableHeight:10,
                // 切换标签
                modaleShow:1,
                // api
                queryUrl:Api.reportSafeRptInjury,
              companyList:[],
                jobType1NumList:[],
                jobType2NumList:[],
                jobType3NumList:[],
                injuryDegree1NumList:[],
                injuryDegree2NumList:[],
                injuryDegree3NumList:[],
                furloughNumList:[],

                echartsDate:{
                  tooltip:{
                    trigger:'axis',
                        axisPointer:{
                      type: 'shadow'
                    }
                  },
                  grid:{
                    left: '3%',
                    right: '3%',
                    bottom: '8%',
                    containLabel: true
                  },
                  dataZoom: [{
                    type: 'inside'
                  }, {
                    type: 'slider',
                    textStyle:false
                  }],
                  yAxis:[
                    {
                      type: 'value'
                    }
                  ],
                  color:['#FD5C50','#FF9800', '#afff40', '#40c4ff', '#FF3E80','#42A5F5', '#FFC310', '#1DE9B6','#6666CC','#afff40'],
                  legend:{
                    data:['正式工', '合同工', '劳务工', '轻伤', '重伤', '死亡', '歇工总天数']
                  },

                  xAxis:[
                    {
                      type: 'category',
                      data:this.companyList,
                      axisLabel: {
                        interval: 0,
                        formatter:function(value){
                          var str = "";
                          var num = 6; //每行显示字数
                          var valLength = value.length; //该项x轴字数
                          var rowNum = Math.ceil(valLength / num); // 行数
                          if(rowNum > 1) {
                            for(var i = 0; i < rowNum; i++) {
                              var temp = "";
                              var start = i * num;
                              var end = start + num;
                              temp = value.substring(start, end) + "\n";
                              str += temp;
                            }
                            return str;
                          } else {
                            return value;
                          }
                        }
                      }
                    }
                  ],

                  series:[
                  {
                    name: '正式工',
                    type: 'bar',
                    stack: '员工分类',
                    emphasis:{
                      focus: 'series'
                    },
                    data:this.jobType1NumList
                  },
                    {
                      name: '合同工',
                      type: 'bar',
                      stack: '员工分类',
                      emphasis:{
                        focus: 'series'
                      },
                      data:this.jobType2NumList
                    },
                    {
                      name: '劳务工',
                      type: 'bar',
                      stack: '员工分类',
                      emphasis:{
                        focus: 'series'
                      },
                      data:this.jobType3NumList
                    },
                  {
                    name: '轻伤',
                    type: 'bar',
                    stack: '伤亡类型',
                    emphasis:{
                      focus:'series'
                    },
                    data: this.injuryDegree1NumList
                  },
                  {
                    name: '重伤',
                    type: 'bar',
                    stack: '伤亡类型',
                    emphasis:{
                      focus:'series'
                    },
                    data: this.injuryDegree2NumList
                  },
                    {
                      name: '死亡',
                      type: 'bar',
                      stack: '伤亡类型',
                      emphasis:{
                        focus:'series'
                      },
                      data: this.injuryDegree3NumList
                    },
                    {
                      name: '歇工总天数',
                      type: 'bar',
                      emphasis:{
                        focus:'series'
                      },
                      data: this.furloughNumList
                    }
                ]


                }
            }
        },
        mounted(){

            this.setTableHeight()
            this.query();

        },
        methods: {
            ...pageCommonFunction,
            querys() {
              this.pageStatus.loading = true
              let data = {
                startPage: this.pagedata.currentPage,
                size: this.pagedata.pageSize,
                conditions: this.dataToQuery
              };

              this.$http.post(this.queryUrl, data).then((res) => {
                if (res.data.status === 201) {
                  this.$Message.error(res.data.msg);
                }
                this.dataTable = res.data.data.data;
                this.echartsDate.xAxis[0].data = res.data.data.companyList
                this.echartsDate.series = [
                  {name: '正式工', type: 'bar', stack: '员工分类', emphasis:{focus: 'series'}, data:res.data.data.jobType1NumList},
                  {name: '合同工', type: 'bar', stack: '员工分类', emphasis:{focus: 'series'}, data:res.data.data.jobType2NumList},
                  {name: '劳务工', type: 'bar', stack: '员工分类', emphasis:{focus: 'series'}, data:res.data.data.jobType3NumList},
                  {name: '轻伤', type: 'bar', stack: '伤亡类型', emphasis:{focus:'series'}, data: res.data.data.injuryDegree1NumList},
                  {name: '重伤', type: 'bar', stack: '伤亡类型', emphasis:{focus:'series'}, data: res.data.data.injuryDegree2NumList},
                  {name: '死亡', type: 'bar', stack: '伤亡类型', emphasis:{focus:'series'}, data: res.data.data.injuryDegree3NumList},
                  {name: '歇工总天数', type: 'bar', emphasis:{focus:'series'}, data: res.data.data.furloughNumList}
                ]
                this.drawPie();
                this.pagedata.total = res.data.data.totalSize;
                this.pageStatus.loading = false
              }).catch(e => {
                this.$Message.error("数据获取失败")
                console.log(e)
                this.pageStatus.loading = false
              })
            },
            query() {
                this.dataToQuery.twoLevelOrgId = this.currentUser.twoLevelOrgId?this.currentUser.twoLevelOrgId:undefined
                /*if(!this.dataToQuery.yearDate) {
                    this.dataToQuery.yearDate = new Date();
                }
                if(this.dataToQuery.yearDate) {
                    this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
                }*/
                if(!this.dataToQuery.companyId) {
                    this.dataToQuery.companyId = undefined
                }
                this.querys();
            },
            lowerStep(name) {
                this.modaleShow = name
                if (name == 1) {
                    this.queryUrl = Api.reportEnRptInvestment
                }else{
                    this.queryUrl = Api.reportEnRptInvestmentPlan
                }
                this.setTableHeight()
                this.query();

            },
          drawPie() {
            this.chart = echarts.init(document.getElementById('companyEcharts'));
            this.chart.setOption(this.echartsDate);
            window.onresize = this.chart.resize;
          }
        }
    }
</script>
<style scoped>
    /deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
    #companyEcharts {
      /*width: 1100px;*/
      height: 300px;
      text-align:center
    }
</style>
